<template>
    <div class="component component--module page-header">
        <div class="column column--full">
            <header class="header header--page">
                <h1 class="title">
                    <span class="label">{{ props.titleData.title }}</span>
                </h1>
            </header>
            <ol class='list list--breadcrumbs'>
                <li class="breadcrumb__item">
                    <a itemprop="item" class="link">
                        <span>{{ props.titleData.link }}</span>
                    </a>
                </li>
                <li class="breadcrumb__item">
                    <span itemprop="item" class="link">
                        <span itemprop="name">{{ props.titleData.name }}</span>
                    </span>
                </li>
                <li class="breadcrumb__item" v-if="props.titleData.name1">
                    <span itemprop="item" class="link">
                        <span itemprop="name">{{ props.titleData.name1 }}</span>
                    </span>
                </li>
            </ol>
        </div>
    </div>
</template>
<script setup lang='ts'>
const props = defineProps(['titleData'])
</script>
<style scoped lang='scss'>
.component, .region {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    max-width: 960px;
}
</style>